<template>
    <div class="head">
      <div class="tp"><img src="../../../../assets/img/wx_banner.png" ></div>
      <div class="tg"><a href="/login">投稿</a></div>
        <div class="menu">
          <ul class="clearfix">
            <li v-for="(item,index) in columns" :key="index" :class="{activeColor:activeIndex==index}" @mouseover="activeIndex = index">
              <!-- <a :href="item.href">{{ item.label }}</a> -->
              <a v-if="!item.catid && item.infoid" :href="item.href + '?id=' + item.infoid">{{ item.label }}</a>
              <a v-if="item.catid && !item.infoid" :href="item.href + '?id=' + item.catid">{{ item.label }}</a>
              <a v-if="!item.catid && !item.infoid" :href="item.href">{{ item.label }}</a>
            </li>
          </ul>
        </div>
    </div>
</template>  

<script setup name="headIndex">
import { getMenu } from "@/api/yxzx/menu";
import { listpassInfo } from "@/api/yxzx/info"; 
export default {
    props: {
      hindex: {
        type: Number
      },
    },
    data() {
      return {
        loading: true,
        activeIndex: null,
        // 列信息
        columns: [
          { key: 0, label: `首页`, href: '/home' },
          { key: 1, label: `综保要闻`, href: '/list', catid: ''},
          { key: 2, label: `公告发布`, href: '/list', catid: '' },
          { key: 3, label: `政策法规`, href: '/list', catid: '' },
          { key: 4, label: `天天读报`, href: '/list', catid: '' },
          { key: 5, label: `保障精英`, href: '/list', catid: '' },
          { key: 6, label: `首长信箱`, href: '/email' },
          { key: 7, label: `问卷调查`, href: '/question' },
          { key: 8, label: `书香军营`, href: '/list', catid: '' },
          { key: 9, label: `稿件统计`, href: '/article', infoid: '' }      
        ],
      }
    },
    created() {
      this.getList()
    },
    
    mounted(){
      this.activeIndex = this.hindex
    },
    methods: {
      /** 查询菜单列表 */
      getList() {
        this.loading = true;
        getMenu().then(response => {
          this.$emit('getCat', response.resultContent)
          response.resultContent.map((item) => {
            if (item.categoryname == '综保要闻') {
              this.columns[1].catid = item.categoryid
            } else if (item.categoryname == '公告发布') {
              this.columns[2].catid = item.categoryid
            } else if (item.categoryname == '政策法规') {
              this.columns[3].catid = item.categoryid
            } else if (item.categoryname == '天天读报') {
              this.columns[4].catid = item.categoryid
            } else if (item.categoryname == '保障精英') {
              this.columns[5].catid = item.categoryid
            } else if (item.categoryname == '书香军营') {
              this.columns[8].catid = item.categoryid
            } else if (item.categoryname == '稿件统计') {
              listpassInfo(item.categoryid, '', 1, 1).then(response => {
                this.columns[9].infoid = response.InfoList[0].infoid               
              })
            }
            
          })
          this.loading = false;
        });
      },
    },
}
</script>